<template>
    <div class="list">
        <mt-cell
            :title="good.CommodityName"
            :label="'￥'+good.OriginalPrice"
            v-for="good in goods"
            :key="good.CommodityId"
        >
            <mt-button @click="addGoodInCars(good)" size="small" type="danger">购买</mt-button>
            <img slot="icon" :src="good.SmallPic" width="48" height="48">
        </mt-cell>
    </div>
</template>

<script>
import {mapActions} from "vuex"
export default {
    data(){
        return {
            goods:[]
        }
    },
    methods:{
        // buyGood(good){
        //     this.$store.dispatch("addGoodInCars",good)
        // }
        ...mapActions(["addGoodInCars"])
    },
    created(){
        this.$http.get("/vue-douban/api/fruit.json").then(res=>{
            console.log(res)
            this.goods = res.data.CommodityList;
        })
    }
}
</script>

<style lang="scss">
    .mint-cell{
        margin:10px 0;
    }
    .mint-cell-title{
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        img{
            float:left;
        }
    }
    .mint-cell-label{
        font-size: 18px;
        color:#b09090;
    }
</style>
